<%+header%> 
<div class="container-fluid container-bg border border-3 rounded-4 col-12 mb-4">
    <div class="log-container" style="width: 100%;">
        <div class="log-section p-3 mb-4" style="width: 100%; background-color: #000;">
            <h2 class="log-header text-primary">Neko Logs</h2>
            <div class="border rounded-4 p-2" style="border: 1px solid rgba(255, 255, 255, 0.2); border-radius: 10px;">
                <pre id="plugin_log" class="form-control" style="height: 400px; overflow-y: scroll; background-color: #000; color: #fff; border: none;"><%= luci.sys.exec("cat /etc/neko/tmp/log.txt") %></pre>
            </div>
            <form action="<%= luci.dispatcher.build_url('admin/services/neko/logs') %>" method="post" class="mt-3 log-footer">
                <button type="submit" name="clear_plugin_log" class="btn btn-danger btn-clear-log" style="background-color: #dc3545;">Clear Log</button>
            </form>
        </div>

        <div class="log-section p-3 mb-4" style="width: 100%; background-color: #000;">
            <h2 class="log-header text-success">Mihomo Logs</h2>
            <div class="border rounded-4 p-2" style="border: 1px solid rgba(255, 255, 255, 0.2); border-radius: 10px;">
                <pre id="mihomo_log" class="form-control" style="height: 400px; overflow-y: scroll; background-color: #000; color: #fff; border: none;"><%= luci.sys.exec("cat /etc/neko/tmp/neko_log.txt") %></pre>
            </div>
            <form action="<%= luci.dispatcher.build_url('admin/services/neko/logs') %>" method="post" class="mt-3 log-footer">
                <button type="submit" name="clear_mihomo_log" class="btn btn-warning btn-clear-log" style="background-color: #ffc107;">Clear Log</button>
            </form>
        </div>

        <div class="log-section p-3 mb-4" style="width: 100%; background-color: #000;">
            <h2 class="log-header text-info">Sing-box Logs</h2>
            <div class="border rounded-4 p-2" style="border: 1px solid rgba(255, 255, 255, 0.2); border-radius: 10px;">
                <pre id="singbox_log" class="form-control" style="height: 400px; overflow-y: scroll; background-color: #000; color: #fff; border: none;"><%= luci.sys.exec("cat /var/log/singbox_log.txt") %></pre>
            </div>
            <form action="<%= luci.dispatcher.build_url('admin/services/neko/logs') %>" method="post" class="mt-3 log-footer">
                <button type="submit" name="clear_singbox_log" class="btn btn-primary btn-clear-log" style="background-color: #007bff;">Clear Log</button>
            </form>
        </div>
    </div>

    <div class="form-check form-switch text-center">
        <input class="form-check-input" type="checkbox" id="autoRefreshToggle" checked>
        <label class="form-check-label" for="autoRefreshToggle" style="color: #fff;">Automatic refresh</label>
    </div>
</div>

<style>
    .btn-clear-log {
        margin-top: 10px;
        padding: 10px 20px; 
        border-radius: 5px; 
        border: none; 
        cursor: pointer; 
    }

    .btn-danger {
        background-color: #dc3545; 
        color: white;
    }

    .btn-warning {
        background-color: #ffc107; 
        color: black; 
    }

    .btn-primary {
        background-color: #007bff; 
        color: white; 
    }

    .btn-danger:hover, .btn-warning:hover, .btn-primary:hover {
        opacity: 0.8; 
    }
</style>

<script>
    let autoRefreshEnabled = true;

    document.getElementById('autoRefreshToggle').addEventListener('change', function() {
        autoRefreshEnabled = this.checked;
    });

    function scrollToBottom(elementId) {
        var logElement = document.getElementById(elementId);
        logElement.scrollTop = logElement.scrollHeight; 
    }

    function fetchLogs() {
        if (autoRefreshEnabled) {
            fetch('<%= luci.dispatcher.build_url("admin/services/neko/fetch_plugin_log") %>')
                .then(response => response.text())
                .then(data => {
                    var pluginLog = document.getElementById('plugin_log');
                    pluginLog.textContent = data;
                    scrollToBottom('plugin_log'); 
                });

            fetch('<%= luci.dispatcher.build_url("admin/services/neko/fetch_mihomo_log") %>')
                .then(response => response.text())
                .then(data => {
                    var mihomoLog = document.getElementById('mihomo_log');
                    mihomoLog.textContent = data;
                    scrollToBottom('mihomo_log'); 
                });

            fetch('<%= luci.dispatcher.build_url("admin/services/neko/fetch_singbox_log") %>')
                .then(response => response.text())
                .then(data => {
                    var singboxLog = document.getElementById('singbox_log');
                    singboxLog.textContent = data;
                    scrollToBottom('singbox_log'); 
                });
        }
    }

    setInterval(fetchLogs, 5000);
</script>
<%+footer%> 